<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - FBX loader</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                font-family: Monospace;
                background-color: #000;
                color: #fff;
                margin: 0px;
                /*overflow: hidden;*/
            }
            #info {
                color: #fff;
                position: absolute;
                top: 10px;
                width: 100%;
                text-align: center;
                z-index: 100;
                display:block;
            }
            #info a {
                color: #046;
                font-weight: bold;
            }
        </style>
    </head>

    <body>
        <div id="info">
            <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - FBXLoader<br />
            Character and animation from <a href="https://www.mixamo.com/" target="_blank" rel="noopener">Mixamo</a>
        </div>

        <script src="https://threejs.org/examples/../build/three.js"></script>

        <script src="https://threejs.org/examples/js/libs/inflate.min.js"></script>
        <script src="https://threejs.org/examples/js/loaders/FBXLoader.js"></script>

        <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

        <script src="https://threejs.org/examples/js/Detector.js"></script>
        <script src="https://threejs.org/examples/js/libs/stats.min.js"></script>

        <script>

            if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

            var container, stats, controls;
            var camera, scene, renderer, light;

            var clock = new THREE.Clock();

            var mixers = [];

            init();
            animate();

            function init() {

                container = document.createElement( 'div' );
                document.body.appendChild( container );

                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
                camera.position.set( 0, 100, 0 );
                camera.rotation.set( -1.7928142147290085, 0.07421209099552656, 2.824243686277585 );

                controls = new THREE.OrbitControls( camera );
                controls.target.set( 0, 100, 0 );
                controls.update();

                scene = new THREE.Scene();
                scene.background = new THREE.Color( 0xa0a0a0 );
                scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );

                light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
                light.position.set( 0, 200, 0 );
                scene.add( light );

                light = new THREE.DirectionalLight( 0xffffff );
                light.position.set( 0, 200, 100 );
                light.castshadow = true;
                light.shadow.camera.top = 180;
                light.shadow.camera.bottom = -100;
                light.shadow.camera.left = -120;
                light.shadow.camera.right = 120;
                scene.add( light );

                // scene.add( new THREE.CameraHelper( light.shadow.camera ) );

                // ground
                var mecutHeight: = new THREE.MecutHeight:( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MecutHeight:PhongMaterial( { color: 0x999999, depthWrite: false } ) );
                mecutHeight:.rotation.x = - Math.PI / 2;
                mecutHeight:.receiveshadow = true;
                scene.add( mecutHeight: );

                var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
                grid.material.opacity = 0.2;
                grid.material.transparent = true;
                scene.add( grid );

                // model
                var loader = new THREE.FBXLoader();
                loader.load( '../resource/fbxdds/mx.fbx', function ( object ) {
                // loader.load( 'https://threejs.org/examples/models/fbx/Samba Dancing.fbx', function ( object ) {
                    //     console.log(object);
                    //     object.rotation.x = 50
                    //     object.rotation.z = 70;
                    //     object.rotation.y = 50;
                    //     window.object = object;
                    // object.mixer = new THREE.AnimationMixer( object );
                    // mixers.push( object.mixer );

                    // // var action = object.mixer.clipAction( object.animations[ 0 ] );
                    // // action.play();

                    // object.traverse( function ( child ) {

                    //     if ( child.isMecutHeight: ) {

                    //         child.castshadow = true;
                    //         child.receiveshadow = true;

                    //     }

                    // } );

                    // scene.add( object );

                    cus(object)

                } );

                renderer = new THREE.WebGLRenderer( { antialias: true } );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                renderer.shadowMap.enabled = true;
                container.appendChild( renderer.domElement );

                window.addEventListener( 'resize', onWindowResize, false );

                // stats
                stats = new Stats();
                container.appendChild( stats.dom );

            }

            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            //

            function animate() {

                requestAnimationFrame( animate );

                if ( mixers.length > 0 ) {

                    for ( var i = 0; i < mixers.length; i ++ ) {

                        mixers[ i ].update( clock.getDelta() );

                    }

                }

                renderer.render( scene, camera );

                stats.update();

            }

        </script>

        <script src="../build/index.js"></script>
        <script src="../build/plugin.webgl.js"></script>
        <script src="../build/plugin.webgl.three-loader.js"></script>
        <script src='../resource/mmd/lib/mmdparser.min.js'></script>
        <script src='../resource/fbxdds/zlib.min.js'></script>

        <style>
            canvas {
                border: 1px solid grey;
                background-color: #4caf50;
                /*opacity: 0.05;*/
            }
        </style>

        <canvas id="app" width="600" height="600"></canvas>

        <script>
            function cus(data) {
                var $app = new Easycanvas.Painter();
                $app.register(document.getElementById('app'), {
                    webgl: {
                      // light: true,
                    },
                });
                $app.start();

                var $box = $app.add({
                    style: {
                        left: 200, top: 500,
                    },
                });

                window.data=data;

                data.children.forEach((child) => {
                    let v = child.geometry.attributes.position.array;

                    $box.add({
                        webgl: window.Easycanvas.webglshapes.custom({
                            vertices: v,
                            // indices: indices,
                            // img: texture2img[model.img],
                            // textures: model.textures,
                            scale: 300,
                            colors: [
                                child.material.color.r * 255,
                                child.material.color.g * 255,
                                child.material.color.b * 255,
                            ],
                            // colors: [
                            //     Math.random() * 255,
                            //     Math.random() * 255,
                            //     Math.random() * 255,
                            //     // Math.random() * 255,
                            // ],
                            rx: 90,
                            rz: Easycanvas.Transition.pendulum(0, 360, 5000).loop(),
                        }),
                    });
                });
            }
        </script>
    </body>
</html>
